<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>07.JS性能优化进阶.md | aiyoudiao</title>
    <meta name="generator" content="VuePress 1.9.10" />
    <link rel="icon" href="/img/blog.ico">
    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script> <meta name="description" content="码二~">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,gitee,markdown">
    <meta name="theme-color" content="#11a8cd">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="preload" href="/assets/css/0.styles.146197cf.css" as="style"><link rel="preload" href="/assets/js/app.bd2fbc77.js" as="script"><link rel="preload" href="/assets/js/3.72c9c947.js" as="script"><link rel="preload" href="/assets/js/108.770493ab.js" as="script"><link rel="preload" href="/assets/js/42.4251ca36.js" as="script"><link rel="prefetch" href="/assets/js/1.4ed4671d.js"><link rel="prefetch" href="/assets/js/10.bd6ddb58.js"><link rel="prefetch" href="/assets/js/100.20d2348f.js"><link rel="prefetch" href="/assets/js/101.ba7b784c.js"><link rel="prefetch" href="/assets/js/102.c3e2dcae.js"><link rel="prefetch" href="/assets/js/103.0f4c50f3.js"><link rel="prefetch" href="/assets/js/104.ef47a111.js"><link rel="prefetch" href="/assets/js/105.2e00f516.js"><link rel="prefetch" href="/assets/js/106.b50e19b9.js"><link rel="prefetch" href="/assets/js/107.e125a8f6.js"><link rel="prefetch" href="/assets/js/109.74766d7b.js"><link rel="prefetch" href="/assets/js/11.f786a5ee.js"><link rel="prefetch" href="/assets/js/110.0b0ee5b4.js"><link rel="prefetch" href="/assets/js/111.835b0e44.js"><link rel="prefetch" href="/assets/js/112.352fa217.js"><link rel="prefetch" href="/assets/js/113.4e908557.js"><link rel="prefetch" href="/assets/js/114.7b77996d.js"><link rel="prefetch" href="/assets/js/115.bdc61268.js"><link rel="prefetch" href="/assets/js/116.d5da9b8b.js"><link rel="prefetch" href="/assets/js/117.35ab1f9f.js"><link rel="prefetch" href="/assets/js/118.517c151d.js"><link rel="prefetch" href="/assets/js/119.f7f49ba8.js"><link rel="prefetch" href="/assets/js/12.3c729a65.js"><link rel="prefetch" href="/assets/js/120.b559598b.js"><link rel="prefetch" href="/assets/js/121.bf8a2f43.js"><link rel="prefetch" href="/assets/js/122.11a0bc97.js"><link rel="prefetch" href="/assets/js/123.2bafdde7.js"><link rel="prefetch" href="/assets/js/124.dc393688.js"><link rel="prefetch" href="/assets/js/125.ed3f389a.js"><link rel="prefetch" href="/assets/js/126.8fd9a57d.js"><link rel="prefetch" href="/assets/js/127.3bf2a1f2.js"><link rel="prefetch" href="/assets/js/128.b9c671d3.js"><link rel="prefetch" href="/assets/js/129.5d331f0d.js"><link rel="prefetch" href="/assets/js/13.7b1a1fe5.js"><link rel="prefetch" href="/assets/js/130.53e4f9c6.js"><link rel="prefetch" href="/assets/js/131.dcc47e1d.js"><link rel="prefetch" href="/assets/js/132.692dcdcd.js"><link rel="prefetch" href="/assets/js/133.e293202c.js"><link rel="prefetch" href="/assets/js/134.593dccf2.js"><link rel="prefetch" href="/assets/js/135.d76d384b.js"><link rel="prefetch" href="/assets/js/136.a519c23c.js"><link rel="prefetch" href="/assets/js/137.b1821288.js"><link rel="prefetch" href="/assets/js/138.5bcea4ef.js"><link rel="prefetch" href="/assets/js/139.076664b0.js"><link rel="prefetch" href="/assets/js/14.35f257b2.js"><link rel="prefetch" href="/assets/js/140.a019e655.js"><link rel="prefetch" href="/assets/js/141.1f70e1c7.js"><link rel="prefetch" href="/assets/js/142.5ed728fd.js"><link rel="prefetch" href="/assets/js/143.1c8cdc78.js"><link rel="prefetch" href="/assets/js/144.b0cb125b.js"><link rel="prefetch" href="/assets/js/145.c0209a76.js"><link rel="prefetch" href="/assets/js/146.551469f4.js"><link rel="prefetch" href="/assets/js/147.1dfd721d.js"><link rel="prefetch" href="/assets/js/148.91d07ef5.js"><link rel="prefetch" href="/assets/js/149.5b88b710.js"><link rel="prefetch" href="/assets/js/15.23bbc29a.js"><link rel="prefetch" href="/assets/js/150.8301107f.js"><link rel="prefetch" href="/assets/js/151.867da089.js"><link rel="prefetch" href="/assets/js/152.935d5046.js"><link rel="prefetch" href="/assets/js/153.f39d8435.js"><link rel="prefetch" href="/assets/js/154.6b9eb2c3.js"><link rel="prefetch" href="/assets/js/155.14283ad4.js"><link rel="prefetch" href="/assets/js/156.2d7c1a2a.js"><link rel="prefetch" href="/assets/js/157.2f28d02f.js"><link rel="prefetch" href="/assets/js/158.151221ae.js"><link rel="prefetch" href="/assets/js/159.ef6d7ffe.js"><link rel="prefetch" href="/assets/js/16.1793aef7.js"><link rel="prefetch" href="/assets/js/160.de54c4ea.js"><link rel="prefetch" href="/assets/js/161.24d4e57c.js"><link rel="prefetch" href="/assets/js/162.632032fe.js"><link rel="prefetch" href="/assets/js/163.fd01cd99.js"><link rel="prefetch" href="/assets/js/164.45f203f5.js"><link rel="prefetch" href="/assets/js/165.aafe4fe1.js"><link rel="prefetch" href="/assets/js/166.1dd1d21c.js"><link rel="prefetch" href="/assets/js/167.5501b3a1.js"><link rel="prefetch" href="/assets/js/168.fbe58b1f.js"><link rel="prefetch" href="/assets/js/169.2cae7f5e.js"><link rel="prefetch" href="/assets/js/17.bbfe63f2.js"><link rel="prefetch" href="/assets/js/170.265f7c9e.js"><link rel="prefetch" href="/assets/js/171.b61f327d.js"><link rel="prefetch" href="/assets/js/172.5d0043fd.js"><link rel="prefetch" href="/assets/js/173.45284bb6.js"><link rel="prefetch" href="/assets/js/174.9130e0c4.js"><link rel="prefetch" href="/assets/js/175.2b38bddd.js"><link rel="prefetch" href="/assets/js/176.9772cf09.js"><link rel="prefetch" href="/assets/js/177.69048ebc.js"><link rel="prefetch" href="/assets/js/178.e10d7ce5.js"><link rel="prefetch" href="/assets/js/179.3789edc0.js"><link rel="prefetch" href="/assets/js/18.0807ded0.js"><link rel="prefetch" href="/assets/js/180.ab675e47.js"><link rel="prefetch" href="/assets/js/181.2e39eff0.js"><link rel="prefetch" href="/assets/js/19.becf5a76.js"><link rel="prefetch" href="/assets/js/2.eb089a4f.js"><link rel="prefetch" href="/assets/js/20.cea59652.js"><link rel="prefetch" href="/assets/js/21.58c43ff1.js"><link rel="prefetch" href="/assets/js/22.f73b825d.js"><link rel="prefetch" href="/assets/js/23.43b13730.js"><link rel="prefetch" href="/assets/js/24.f77f93ca.js"><link rel="prefetch" href="/assets/js/25.7dfaf3fb.js"><link rel="prefetch" href="/assets/js/26.629d28e5.js"><link rel="prefetch" href="/assets/js/27.4fff23ea.js"><link rel="prefetch" href="/assets/js/28.1b8ae389.js"><link rel="prefetch" href="/assets/js/29.d5cce9a0.js"><link rel="prefetch" href="/assets/js/30.961d5519.js"><link rel="prefetch" href="/assets/js/31.121dd1af.js"><link rel="prefetch" href="/assets/js/32.4a3c5df7.js"><link rel="prefetch" href="/assets/js/33.5537f44b.js"><link rel="prefetch" href="/assets/js/34.1d4d4653.js"><link rel="prefetch" href="/assets/js/35.d094209b.js"><link rel="prefetch" href="/assets/js/36.832660c5.js"><link rel="prefetch" href="/assets/js/37.145c3665.js"><link rel="prefetch" href="/assets/js/38.4f369bfe.js"><link rel="prefetch" href="/assets/js/39.ba060044.js"><link rel="prefetch" href="/assets/js/4.66d742f6.js"><link rel="prefetch" href="/assets/js/40.e50e0379.js"><link rel="prefetch" href="/assets/js/41.4ed7617c.js"><link rel="prefetch" href="/assets/js/43.d22b74c4.js"><link rel="prefetch" href="/assets/js/44.59439f9d.js"><link rel="prefetch" href="/assets/js/45.da28bc46.js"><link rel="prefetch" href="/assets/js/46.b8db1176.js"><link rel="prefetch" href="/assets/js/47.7ed16fc7.js"><link rel="prefetch" href="/assets/js/48.c982d5ed.js"><link rel="prefetch" href="/assets/js/49.a7579f55.js"><link rel="prefetch" href="/assets/js/5.08802d7d.js"><link rel="prefetch" href="/assets/js/50.103b5bf6.js"><link rel="prefetch" href="/assets/js/51.0fe9d79a.js"><link rel="prefetch" href="/assets/js/52.9ba31e26.js"><link rel="prefetch" href="/assets/js/53.0e8bc1f0.js"><link rel="prefetch" href="/assets/js/54.9566e517.js"><link rel="prefetch" href="/assets/js/55.a124abae.js"><link rel="prefetch" href="/assets/js/56.d9cf0800.js"><link rel="prefetch" href="/assets/js/57.93599da0.js"><link rel="prefetch" href="/assets/js/58.d943f85b.js"><link rel="prefetch" href="/assets/js/59.50a66488.js"><link rel="prefetch" href="/assets/js/6.a3ea60eb.js"><link rel="prefetch" href="/assets/js/60.21aa3aa3.js"><link rel="prefetch" href="/assets/js/61.6712c00f.js"><link rel="prefetch" href="/assets/js/62.eff3e4b1.js"><link rel="prefetch" href="/assets/js/63.09701d5a.js"><link rel="prefetch" href="/assets/js/64.eb440dec.js"><link rel="prefetch" href="/assets/js/65.aeed0579.js"><link rel="prefetch" href="/assets/js/66.97244c64.js"><link rel="prefetch" href="/assets/js/67.e01c5c24.js"><link rel="prefetch" href="/assets/js/68.21be91ba.js"><link rel="prefetch" href="/assets/js/69.c0849905.js"><link rel="prefetch" href="/assets/js/7.7fd40e91.js"><link rel="prefetch" href="/assets/js/70.b32bbe5d.js"><link rel="prefetch" href="/assets/js/71.0efbc0c7.js"><link rel="prefetch" href="/assets/js/72.ef963181.js"><link rel="prefetch" href="/assets/js/73.ca7dd5db.js"><link rel="prefetch" href="/assets/js/74.4483ede8.js"><link rel="prefetch" href="/assets/js/75.374ab483.js"><link rel="prefetch" href="/assets/js/76.b4a39f08.js"><link rel="prefetch" href="/assets/js/77.6b30c3cd.js"><link rel="prefetch" href="/assets/js/78.15376c33.js"><link rel="prefetch" href="/assets/js/79.3153fcec.js"><link rel="prefetch" href="/assets/js/80.9a88c684.js"><link rel="prefetch" href="/assets/js/81.1e3f842c.js"><link rel="prefetch" href="/assets/js/82.996dbd3d.js"><link rel="prefetch" href="/assets/js/83.955158bf.js"><link rel="prefetch" href="/assets/js/84.71bdc76d.js"><link rel="prefetch" href="/assets/js/85.774e49f2.js"><link rel="prefetch" href="/assets/js/86.bebf32e5.js"><link rel="prefetch" href="/assets/js/87.becdbde1.js"><link rel="prefetch" href="/assets/js/88.49e933f4.js"><link rel="prefetch" href="/assets/js/89.eeceedfd.js"><link rel="prefetch" href="/assets/js/90.3ea6dd12.js"><link rel="prefetch" href="/assets/js/91.62a6a556.js"><link rel="prefetch" href="/assets/js/92.e2ebb8f5.js"><link rel="prefetch" href="/assets/js/93.dcdefe7a.js"><link rel="prefetch" href="/assets/js/94.bf412146.js"><link rel="prefetch" href="/assets/js/95.8deadcdc.js"><link rel="prefetch" href="/assets/js/96.9977087a.js"><link rel="prefetch" href="/assets/js/97.6591f9da.js"><link rel="prefetch" href="/assets/js/98.4db7f75e.js"><link rel="prefetch" href="/assets/js/99.a61462e9.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.2852b102.js"> <link rel="stylesheet" href="/assets/css/0.styles.146197cf.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" width="50" height="50" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="https://p3-passport.byteacctimg.com/img/user-avatar/794fdae4ff249d532da19a3c26d420ed~300x300.image" alt="aiyoudiao" class="logo"> <span class="site-name can-hide">
      aiyoudiao
    </span></a> <div class="links"><div class="sky-switch" data-v-3a03d589><label for="toggle" data-v-3a03d589><input id="toggle" type="checkbox" data-v-3a03d589><div data-v-3a03d589></div></label></div> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="/img/mar.jpg"> <div class="blogger-info"><h3>码二</h3> <span>扫微信二维码，认识一下码二吧😉。</span></div></div> <nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/84633490449/" class="sidebar-link">实现一个vdom</a></li><li><a href="/pages/42534310431/" class="sidebar-link">前端路由监听</a></li><li><a href="/pages/8985100040/" class="sidebar-link">定制自己的代码片段</a></li><li><a href="/pages/70903450545/" class="sidebar-link">写一个下载文件功能</a></li><li><a href="/pages/00457481048/" class="sidebar-link">正则表达式</a></li><li><a href="/pages/26253370137/" class="sidebar-link">JS性能优化</a></li><li><a href="/pages/97717370337/" aria-current="page" class="active sidebar-link">JS性能优化进阶</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/97717370337/#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/pages/97717370337/#performance-工具" class="sidebar-link">Performance 工具</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/97717370337/#内存问题" class="sidebar-link">内存问题</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/97717370337/#监控内存的方式" class="sidebar-link">监控内存的方式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/97717370337/#浏览器的任务管理器" class="sidebar-link">浏览器的任务管理器</a></li><li class="sidebar-sub-header"><a href="/pages/97717370337/#timeline-时序图界面" class="sidebar-link">Timeline 时序图界面</a></li><li class="sidebar-sub-header"><a href="/pages/97717370337/#堆快照图界面" class="sidebar-link">堆快照图界面</a></li><li class="sidebar-sub-header"><a href="/pages/97717370337/#页面效果-频繁的垃圾回收" class="sidebar-link">页面效果-频繁的垃圾回收</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/97717370337/#v8-引擎工作流" class="sidebar-link">V8 引擎工作流</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/97717370337/#组成部分" class="sidebar-link">组成部分</a></li><li class="sidebar-sub-header"><a href="/pages/97717370337/#堆栈操作" class="sidebar-link">堆栈操作</a></li><li class="sidebar-sub-header"><a href="/pages/97717370337/#函数与闭包的堆栈操作" class="sidebar-link">函数与闭包的堆栈操作</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/97717370337/#性能优化" class="sidebar-link">性能优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/97717370337/#jsbench-性能测量" class="sidebar-link">JSBench 性能测量</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>react</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>低代码</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>读书会</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>线性代数</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>docker</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>auto</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>杂记</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"> <div class="theme-vdoing-wrapper bg-style-1"><div class="articleInfo-wrap" data-v-18fb2c02><div class="articleInfo" data-v-18fb2c02><ul class="breadcrumbs" data-v-18fb2c02><li data-v-18fb2c02><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-18fb2c02></a></li> <li data-v-18fb2c02><a href="/categories/?category=%E7%AC%94%E8%AE%B0" title="分类" data-v-18fb2c02>
          笔记
        </a></li> <li data-v-18fb2c02><a href="/categories/?category=JavaScript" title="分类" data-v-18fb2c02>
          JavaScript
        </a></li> <!----></ul> <div class="info" data-v-18fb2c02><div title="作者" class="author iconfont icon-touxiang" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>aiyoudiao</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>2023-03-22</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><!----> <span>
            07.JS性能优化进阶.md
          </span></h1> <div class="theme-vdoing-content content__default"><h1 id="js-性能优化-进阶"><a href="#js-性能优化-进阶" class="header-anchor">#</a> JS 性能优化-进阶</h1> <h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <p>V8 引擎中的垃圾回收操作非常友好：</p> <ol><li>在新生代存储区域中采用的是空间换时间的优化策略，所以新生代的存储区域没有老生代的大。</li> <li>在老生代存储区域中采用的是不阻碍程序执行的增量标记的优化策略，也就是执行-&gt;暂停-&gt;打标记-&gt;执行-&gt;暂停-&gt;继续打标记。这样即不阻止程序正常执行，同时用户对这个过程无感。把耗时的事情进行分段，然后增量的去做。</li></ol> <p>性能的评判标准：可以借助多种工具呈现的效果来进行评判。</p> <h2 id="performance-工具"><a href="#performance-工具" class="header-anchor">#</a> Performance 工具</h2> <p>GC 实现了内存空间在使用过程中的良性循环，从而实现更合理的分配内存。当你能够关注到内存的使用状况，才能判断是否已经达到这样的期望。这个工具就提供了这样的监控功能。</p> <p>流程：
打开网址 -&gt; 打开浏览器开发人员工具 -&gt; 选择 Performance(性能)选项卡 -&gt; 点击 record(录制)按钮 -&gt; 在页面开始用户的操作行为 -&gt; 结束时 stop(停止录制)按钮 -&gt; 分析 Performance(性能)界面中的记录的各项性能指标的图示 -&gt; 可以勾选一些辅助选项，尝试找出问题，开始优化。</p> <h3 id="内存问题"><a href="#内存问题" class="header-anchor">#</a> 内存问题</h3> <p>代码有问题，GC 频繁的垃圾回收，就会出现页面出现延迟加载、经常性的暂停。<br>
内存膨胀，由于申请的内存空间过大，就会出现页面持续出现糟糕的性能表现。<br>
内存泄漏，由于大量的内存不能被回收，就会出现页面的性能随时间的延长而越来越差。</p> <p>解决思路：<br>
内存泄漏，需要找到有问题的代码块，最终修复。<br>
内存膨胀，需要在多种设备上进行测试，从而分析出这是硬件问题还是程序问题。<br>
GC 频繁的垃圾回收，需要通过内存的趋势图来进行分析，找到有问题的代码块，最终修复。</p> <h2 id="监控内存的方式"><a href="#监控内存的方式" class="header-anchor">#</a> 监控内存的方式</h2> <ol><li>浏览器的任务管理器：可以很直接查看到内存变化。</li> <li>Timeline 时序图界面：可以很方便的查看到程序执行过程中的不同时间点的内存变化走势。</li> <li>堆快照图界面：可以看看有没有分离 DOM 的存在，也就是不在页面中存在的真实 DOM，但还有 js 对象引用着这个 DOM 对象，还会占用着 JS 中的内存空间。</li> <li>页面效果：凭借页面呈现的效果来判断是否存在频繁的垃圾回收。</li></ol> <h3 id="浏览器的任务管理器"><a href="#浏览器的任务管理器" class="header-anchor">#</a> 浏览器的任务管理器</h3> <p>这个功能在浏览器的顶栏的空白处进行右键选择菜单列表项时即可打开。<br>
可以大概清除当前运行的程序是否存在问题，但无法简单的定位到问题在哪里。</p> <p>任务管理器中列的说明：</p> <ul><li>任务：程序的名称</li> <li>内存：HTML 的 DOM 节点占用的内存</li> <li>JavaScript 内存：JS 所有可达对象中占用的内存</li></ul> <h3 id="timeline-时序图界面"><a href="#timeline-时序图界面" class="header-anchor">#</a> Timeline 时序图界面</h3> <p>这是浏览器开发人员工具中的 Performance 工具。<br>
录制结束后，可以点击内存的复选框，就能看到各种内存的 timeline 时序图。通过选择某一段范围，从而定位出代码中的问题所在。</p> <p>时序图中的复选框说明：</p> <ul><li>JS 堆：JS 可达对象占用的内存</li> <li>文档：html 操作占用的内存</li> <li>节点：dom 节点占用的内存</li> <li>侦听器：事件操作占用的内存</li> <li>GPU 内存：GPU 加速时占用的内存</li></ul> <h3 id="堆快照图界面"><a href="#堆快照图界面" class="header-anchor">#</a> 堆快照图界面</h3> <p>这是浏览器开发人员工具中的 Memory 工具。<br>
通过对 js 运行时的内存堆中快照进行一个保存，然后可以看到快照中的信息，通过这些信息从而定位相关的问题。</p> <p>分离 DOM 也就是独立的 DOM，它是从 DOM 树中脱离出来或者你自己创建出来的。如果该 DOM 没有被引用，它就会被作为垃圾 DOM 对象，从而被回收。如果有被 JS 对象引用，那么就会一直存活在内存中，就可能导致内存溢出。</p> <p>在操作之前获取一次快照，再操作之后再获取一次快照，通过在筛选框中输入 Detached，就能看出存在浪费内存的分离 DOM 了。找到浪费的 DOM 后，就能够找到那部分代码，最后优化。<br>
截取堆快照时，记得清空 Application 中存储菜单里的网站数据，然后再刷新一下页面，这样就不会截取之前操作应用的内存快照了。</p> <p>内存快照中的类别说明：</p> <ul><li>Detached：分离的，后面会跟着 DOM 类型，比如 HTMLPElement，表示 P 标签</li></ul> <h3 id="页面效果-频繁的垃圾回收"><a href="#页面效果-频繁的垃圾回收" class="header-anchor">#</a> 页面效果-频繁的垃圾回收</h3> <p>GC 工作时，应用程序会暂停。频繁且持续时间长的 GC 回收操作会导致程序呈现假死效果。用户在使用过程中能清晰的感知到程序在卡顿。</p> <p>通过 Timeline 中的频繁的上下浮动趋势和浏览器的任务管理器工具中该程序 JavaScript 内存的频繁的上升下降，从而确定 GC 正在频繁的进行垃圾回收操作，然后定位到那个时间节点，从而判断是什么原因导致出现这样对内存操作不当的行为，最后解决这个问题。</p> <h2 id="v8-引擎工作流"><a href="#v8-引擎工作流" class="header-anchor">#</a> V8 引擎工作流</h2> <h3 id="组成部分"><a href="#组成部分" class="header-anchor">#</a> 组成部分</h3> <ul><li>Scanner 扫描器：对代码进行词法分析，最终转成 token 集。</li> <li>Parser 解析器：对词法转换后的 token 集，进行语法分析，会对语法进行校验，错误就抛异常，最终将代码转成抽象语法树。</li> <li>pre parser 预解析：快速解析，对暂未调用的代码进行预解析，不转成 AST，会创建临时变量引用和声明的 scopes，对部分不规范的语法进行报错。</li> <li>full parser 全量解析：对被调用到的代码进行全量解析，会转成 AST，会创建有效变量引用和声明的 scopes，对全部不规范的语法进行报错。在解析过程中，如发现函数嵌套，就会出现重复的解析操作，所以避免多层级的函数嵌套。</li> <li>Ignition 解释器：V8 提供的，将解析的 AST 转成字节码，同时生成后续编译需要的一些基本信息。</li> <li>TurboFan 编译器：V8 提供的，将字节码转变为汇编代码，然后开始代码执行，最后程序会在堆栈中执行。</li></ul> <h3 id="堆栈操作"><a href="#堆栈操作" class="header-anchor">#</a> 堆栈操作</h3> <p>准备工作：</p> <ul><li>JS 执行环境：通过 V8 把代码转成机器码</li> <li>执行环境栈 ECStack：执行机器码的内存环境空间。</li> <li>执行上下文：把局部代码和全局代码进行隔离，不同的执行区域。有一个全局执行上下文 EC(G)，多个局部(私有)执行上下文 EC(函数名)。</li> <li>VO(G) 全局变量对象空间：所有的变量声明全都存放在这片空间中。</li> <li>AO(函数名) 某函数的变量对象空间：该函数内的变量声明全都存放在这片空间中。</li> <li>GO 全局对象：初始操作时，在内存中开辟的<code>一片空间</code>，这片空间中存放的是不同宿主环境中提供的官方 API。它并不是 VO(G)。</li></ul> <p>操作说明：</p> <ol><li>先有一个 ECStack 空间，然后这个空间中有 EC(G)和别的局部执行上下文。</li> <li>在 EC(G)中有一个 VO(G)，所有的变量存在这里面。</li> <li>值会存入 ECStack 的内存空间中，存入时能获取到地址，VO(G)的变量会和值的地址建立联系。</li> <li>随着代码在 EC(G)中执行，会通过 VO(G)的变量去寻址，就能找到变量对应的值，从而实现值运算及赋新值等操作。</li></ol> <p>小说明：</p> <p>基本数据类型时按值进行操作，同时它们是被放在栈区。栈内存和引用类型的堆内存都是计算机的内存，是不同的设计思想体现，对于 V8 来说，其实都是放在 C++里自由存储区域中。</p> <p>通过栈内存和堆内存可以更好的理解数据的存放，这种设计思想也比较的通用。<br>
栈空间用于存储基本数据类型的值，不用了就直接出栈被销毁。<br>
堆空间用于存储复杂类型的对象值，不用了就会被 GC 给回收。</p> <p>对于 VO(G)来说，它内部的变量是和基本数据类型的值的地址进行联系，只存在一次寻址。<br>
而对于复杂类型，VO(G)内部的变量是和复杂数据类型的地址的地址进行联系，所以会存在多次寻找。</p> <p>小案例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">123</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> obj2 <span class="token operator">=</span> obj1<span class="token punctuation">;</span>

<span class="token comment">// .运算符优先级高，y的值被判定是一个引用类型</span>
<span class="token comment">// 所以y也会是一个地址，转换过来就是这样了，obj1.y = (obj1 = { x: 456 })</span>
obj1<span class="token punctuation">.</span>y <span class="token operator">=</span> obj1 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">456</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj1<span class="token punctuation">.</span>y<span class="token punctuation">)</span> <span class="token comment">// undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj1<span class="token punctuation">)</span> <span class="token comment">// { x: 456 }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj2<span class="token punctuation">)</span> <span class="token comment">// { x: 123, y: { x: 456 } }</span>
</code></pre></div><h3 id="函数与闭包的堆栈操作"><a href="#函数与闭包的堆栈操作" class="header-anchor">#</a> 函数与闭包的堆栈操作</h3> <p>创建函数与创建变量类似，都会在VO(G)中保存一个变量。<br>
函数会单独开辟一个堆内存的空间，用于存放函数体的字符串形式的代码，所以和引用类型一样，会有一个16进制的地址。<br>
在创建函数的时候，函数的作用域<code>[[scope]]</code>是已经确定的，也就是创建该函数时所在的这个执行上下文中。<br>
这里和上述的复杂类型关联的原理一样，该函数变量名是和该函数对应的函数体的地址的地址进行联系，同样存在多次寻找地址的操作，因为函数也是一个对象。</p> <p>函数内部的执行上下文是私有的：</p> <ol><li>函数在执行过程中，会先确定作用域链，当前执行上下文-&gt;...-&gt;全局执行上下文，也就是确定每一级的作用域对象。</li> <li>确定this和arguments对象。</li> <li>形参赋值和变量提升，这些变量声明都会放到AO中。</li> <li>按照顺序执行代码。</li></ol> <p>函数形成闭包的原理：<br>
当前私有上下文中的<code>变量A</code>被当前私有上下文之外的<code>变量B</code>所引用，那么在之外<code>变量B</code>没有手动或者自动销毁之前，就会形成一个针对那个私有上下文中<code>变量A</code>相关的一个闭包，那个<code>变量A</code>将会一直存在在内存中。内存中的变量数据很长时间不使用，同时也不会被释放，那么就会造成浪费，就会内存泄漏问题。<br>
同时闭包也是一种通过私有上下文来保护某些变量数据的机制，在私有上下文中返回一个函数变量，在该函数变量中对私有上下文或者全局上下文中进行变量数据的操作，从而限制对变量本身进行直接的操作，间接的保护了原始数据。</p> <p>如果私有的上下文使用的是全局的变量，那么它永远不会自动回收，如果私有的上下文使用的是局部的变量，那么它可能会在私有函数执行完毕后，被GC自动回收掉。所以如果你想GC能够主动回收，那么就把要回收的变量设置为null。</p> <p>小案例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">const</span> btns <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&quot;button&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len<span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    btns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;=&gt;&quot;</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 3</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>结果永远是3，var声明的变量是在VO(G)中，事件绑定的函数的执行上下文是私有的，js中的for不会生成一个EC。<br>
只有函数才会形成一个EC，所以js中的for还是使用的EC(G)，于是事件绑定的函数的执行上下文只有两个作用域对象，分别是EC(btns[i].click) 和 EC(G)。<br>
AO(btns[i].click)里没有声明变量i，那么就会去VO(G)中找，那么for循环结束后，VO(G)中的i是3。</p> <p>解决办法：</p> <ol><li>使用闭包，将for循环中每次的变量i转换为某个自调用的函数的形参，然后这个自调用的函数内部再返回一个新的函数，最后在这个新的函数中使用变量i。或者直接使用let 关键字，快速形成一个私有执行上下文。</li> <li>添加全局属性，给每个button添加一个属性，然后在执行上下文中确定好this对象为当前button对象时，去使用该button对象这个属性的值。</li> <li>事件委托+添加全局属性，其实也是添加全局属性的方式，手动的给每个button添加一个属性，同时在父级标签上绑定事件，通过在事件冒泡的时候获取对应的事件源(button对象)的该属性。<strong>好处是减少对多个button绑定事件函数时的内存开销，减少了对数据访问的深度和预访问多个button的内存开销</strong>。</li></ol> <h2 id="性能优化"><a href="#性能优化" class="header-anchor">#</a> 性能优化</h2> <h3 id="jsbench-性能测量"><a href="#jsbench-性能测量" class="header-anchor">#</a> JSBench 性能测量</h3> <p>https://jsbench.me/<br>
http://latentflip.com/loupe/</p> <p>空间换时间或者时间换空间</p></div></div> <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=JavaScript" title="标签">#JavaScript</a><a href="/tags/?tag=%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" title="标签">#性能优化</a></div> <div class="last-updated"><span class="prefix">上次更新时间:</span> <span class="time">10年18月2023日 01时57分53秒</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/26253370137/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">JS性能优化</div></a> <a href="/pages/2331001041/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">vue父子组件生命周期顺序</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/26253370137/" class="prev">JS性能优化</a></span> <span class="next"><a href="/pages/2331001041/"> vue父子组件生命周期顺序 </a>
        →
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/45343271027/"><div>01.数据结构导论一览.md</div></a> <span>10-16</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/38850370637/"><div>30.2023年06月04日.md</div></a> <span>06-04</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/74707370537/"><div>08.与测量相关.md</div></a> <span>05-06</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div> </main></div> <div class="footer"><!----> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2017-2023
    <span class="link">aiyoudiao 码二</span> <span>备案号：</span> <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" title="备案号">鄂ICP备2022002654号-1</a></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div><APlayer audio="" fixed="true" theme="#b7daff" loop="loop" order="list" preload="auto" volume="0.7" mutex="true" lrc-type="3" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer><div id="VuepressPluginLive2d"></div></div></div>
    <script src="/assets/js/app.bd2fbc77.js" defer></script><script src="/assets/js/3.72c9c947.js" defer></script><script src="/assets/js/108.770493ab.js" defer></script><script src="/assets/js/42.4251ca36.js" defer></script>
  </body>
</html>
